<template>
	<div class="audit-content detailBoxStyle">
		<div class="block">
			<div class="contentBox mt30 name">代理账号信息</div>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="[1]"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="代理账号"
				>
					<template>
						{{ proxyAccountInfo.userName }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="代理层级"
				>
					<template>
						{{ proxyAccountInfo.proxyLevel }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="直属上级"
				>
					<template>
						{{ proxyAccountInfo.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="所属总代"
				>
					<template>
						{{ proxyAccountInfo.topProxyName }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.belong_merchant')}`"
					prop="merchantName"
				>
					<template>
						{{ proxyAccountInfo.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="业务模式"
				>
					<template>
						{{
							mappingBusinessModel(proxyAccountInfo.businessModel)
						}}
					</template>
				</el-table-column>
				<el-table-column
					key="accountStatus"
					prop="accountStatus"
					align="center"
					:label="$t('common.account_status')"
					min-width="115"
				>
					<template>
						<span
							v-if="!!proxyAccountInfo.paymentLockStatus"
							class="deleteRgba"
						>
							{{ $t('agent.charge_lock') }}
							<br />
						</span>
						<span v-if="false">{{ $t('agent.login_lock') }}：</span>
						<span
							v-if="!!proxyAccountInfo.loginLockStatus"
							class="disableRgba"
						>
							{{ $t('agent.login_lock') }}
						</span>
						<span
							v-if="!!proxyAccountInfo.gameLockStatus"
							class="lockingRgba"
						>
							{{ $t('agent.game_lock') }}
						</span>
						<span
							v-if="
								proxyAccountInfo.loginLockStatus === 0 &&
								proxyAccountInfo.paymentLockStatus === 0
							"
							class="normalRgba"
						>
							{{ $t('agent.normal') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="注册时间"
				>
					<template>
						{{ proxyAccountInfo.createdAt || '-' }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="block">
			<div class="name d-flex">
				<span>
					{{
						dayjs(
							String(detailData.cycleStartDate),
							'YYYYMMDD'
						).format('YYYY-MM-DD')
					}}
					至
					{{
						dayjs(
							String(detailData.cycleEndDate),
							'YYYYMMDD'
						).format('YYYY-MM-DD')
					}}
					佣金统计
				</span>
			</div>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="[detailData]"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="佣金状态"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.payoutStatus === 6"
							class="disableRgba"
						>
							已取消
						</span>
						<span
							v-if="scope.row.payoutStatus === 3"
							class="normalRgba"
						>
							已发放
						</span>
						<span
							v-if="scope.row.payoutStatus === 1"
							class="lockingRgba"
						>
							待发放
						</span>
						<span
							v-if="scope.row.payoutStatus === 5"
							class="deleteRgba"
						>
							无佣金
						</span>
						<span
							v-if="scope.row.payoutStatus === 0"
							class="deleteRgba"
						>
							未结算
						</span>
						<span
							v-if="scope.row.payoutStatus === 2"
							class="deleteRgba"
						>
							待领取
						</span>
						<span
							v-if="scope.row.payoutStatus === 4"
							class="deleteRgba"
						>
							超时未领取
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="德州服务费贡献分成"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.clubPartsAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="德州保险分成"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber(
								'USDT',
								scope.row.insurePartsAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="德州增值服务消费分成"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber(
								'USDT',
								scope.row.clubValueAddedPartsAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="其他场馆佣金"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber(
								'USDT',
								scope.row.otherPartsAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="本期分红"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber('USDT', scope.row.dividendAmount)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="上期结余"
				>
					<template slot-scope="scope">
						<p
							:style="
								handleNumberColor(scope.row.lastMonthBalance)
							"
						>
							<span>
								{{
									handleTotalNumber(
										'USDT',
										scope.row.lastMonthBalance
									)
								}}
							</span>
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="综合佣金"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber(
								'USDT',
								scope.row.commissionAmount
							)
						}}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="block">
			<div class="name">团队佣金明细</div>
			<!-- 德州俱乐部 -->
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="incomeAuditDetail1"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="项目"
					width="150"
				>
					德州俱乐部
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="会员服务费贡献"
					width="150"
				>
					<template slot-scope="scope">
						<el-link
							class="lightBlueColor"
							type="primary"
							@click="amountDialog('ServicecCntribuerDialog')"
						>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.validBetAmount
								)
							}}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="团队分成比例"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.teamPartsRate }}%
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="团队分成金额"
					width="150"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber('USDT', scope.row.teamPartsAmount)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="下级会员返水"
					width="150"
				>
					<template slot-scope="scope">
						{{ handleTotalNumber('USDT', scope.row.rebateAmount) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="德州服务费贡献分成"
					width="150"
				>
					<template slot-scope="scope">
						{{ handleTotalNumber('USDT', scope.row.incomeAmount) }}
					</template>
				</el-table-column>
			</el-table>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="incomeAuditDetail2"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="项目"
					width="150"
				>
					德州保险
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="会员保险输赢"
					width="150"
				>
					<template slot-scope="scope">
						{{
							handleTotalNumber('USDT', scope.row.validBetAmount)
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="团队分成比例"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.teamPartsRate }}%
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="德州保险分成"
					width="150"
				>
					<template slot-scope="scope">
						{{ handleTotalNumber('USDT', scope.row.incomeAmount) }}
					</template>
				</el-table-column>
			</el-table>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="incomeAuditDetail4"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="项目"
					width="150"
				>
					德州增值服务
				</el-table-column>
				<!-- DXCD-1107 TODO:: -->
				<el-table-column
					prop="userName"
					align="center"
					label="增值服务纯利"
					width="150"
				>
					<template slot-scope="scope">
						<!-- <el-link
							class="lightBlueColor"
							type="primary"
							@click="amountDialog('ClubAmountDialog')"
						>
						</el-link> -->
						<span>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.validBetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="团队分成比例"
					width="150"
				>
					<template slot-scope="scope">
						{{ handlePercentage(scope.row.teamPartsRate) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="德州增值服务消费分成"
					width="150"
				>
					<template slot-scope="scope">
						{{ handleTotalNumber('USDT', scope.row.incomeAmount) }}
					</template>
				</el-table-column>
			</el-table>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="incomeAuditDetail3"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="userName"
					align="center"
					label="项目"
					width="150"
				>
					其他场馆
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="会员游戏输赢"
					width="150"
				>
					<template slot-scope="scope">
						<p>
							<el-link
								class="lightBlueColor"
								type="primary"
								@click="amountDialog('memberGameDialog')"
							>
								{{
									handleTotalNumber(
										'USDT',
										scope.row.netAmount
									)
								}}
							</el-link>
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="会员总返水"
					width="150"
				>
					<template slot-scope="scope">
						<p :style="handleNumberColor(scope.row.validBetAmount)">
							<!-- <el-link
								class="lightBlueColor"
								type="primary"
								@click="amountDialog('memberRebateDetail')"
							> -->
							{{
								handleTotalNumber(
									'USDT',
									scope.row.rebateAmount
								)
							}}
							<!-- </el-link> -->
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="memberAccountAdjustAmount"
					align="center"
					label="会员账户调整"
					width="150"
				>
					<template slot-scope="scope">
						<p
							:style="
								handleNumberColor(
									scope.row.otherMemberAccountAdjustAmount ||
										scope.row.memberAccountAdjustAmount
								)
							"
						>
							{{
								handleTotalNumber(
									'USDT',
									scope.row.otherMemberAccountAdjustAmount ||
										scope.row.memberAccountAdjustAmount
								)
							}}
						</p>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="代理净盈亏"
					width="150"
				>
					<template slot-scope="scope">
						<span
							:style="handleNumberColor(scope.row.validBetAmount)"
						>
							<span>
								{{
									handleTotalNumber(
										'USDT',
										scope.row.validBetAmount
									)
								}}
							</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="佣金比例"
					width="150"
				>
					<template slot-scope="scope">
						{{ handlePercentage(scope.row.teamPartsRate) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="其他场馆佣金"
					width="150"
				>
					<template slot-scope="scope">
						{{ handleTotalNumber('USDT', scope.row.incomeAmount) }}
					</template>
				</el-table-column>
			</el-table>
		</div>

		<DarkWaterRed
			style="padding: 0 20px"
			label="本期分红"
			:startDate="detailData.cycleStartDate"
			:endDate="detailData.cycleEndDate"
			:proxyId="detailData.proxyId"
		/>

		<!-- 审核记录 -->
		<template v-if="isShowAudit">
			<div class="block mb" v-if="auditDetail.audit1Operator">
				<p class="name">{{ $t('funds.fund_audit.audit_info') }}</p>
				<div class="block-content">
					<el-row :gutter="20" v-if="auditDetail.audit1Operator">
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_user_1') }}:
							{{ auditDetail.audit1Operator || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_time_1') }}:
							{{ auditDetail.audit1Time || '-' }}
						</el-col>
						<el-col :span="12">
							{{ $t('funds.fund_audit.audit_remark_1') }}:
							<span class="word_break">
								{{ auditDetail.audit1Desc || '-' }}
							</span>
						</el-col>
					</el-row>

					<el-row :gutter="20" v-if="auditDetail.audit2Operator">
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_user_2') }}:
							{{ auditDetail.audit2Operator || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_time_2') }}:
							{{ auditDetail.audit2Time || '-' }}
						</el-col>
						<el-col :span="12">
							{{ $t('funds.fund_audit.audit_remark_2') }}:
							<span class="word_break">
								{{ auditDetail.audit2Desc || '-' }}
							</span>
						</el-col>
					</el-row>
				</div>
			</div>
		</template>

		<!-- 增值服务消费明细弹窗 -->
		<component
			v-if="amountDialogVisible"
			:is="amountDialogName"
			:visible.sync="amountDialogVisible"
			:curData="auditDetail"
			:orderNo="detailData.orderNo"
			:isDetail="true"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import ClubAmountDialog from '@/components/Funds/Commission/clubAmountOuterDialog.vue'
import ServicecCntribuerDialog from '@/components/Funds/Commission/servicecCntribuerOuterDialog.vue'
import MemberGameDialog from '@/components/Funds/Commission/memberGameDialog.vue'
import MemberRebateDetail from '@/components/Funds/Commission/memberRebateDetail.vue'
import DarkWaterRed from '@/components/Funds/DarkWaterRed/index'

export default {
  components: {
    ClubAmountDialog,
    ServicecCntribuerDialog,
    MemberGameDialog,
    MemberRebateDetail,
    DarkWaterRed
  },
  mixins: [list],
  props: {
    detailData: {
      type: Object,
      required: true
    },
    isShowAudit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      accountInfo: {}, // 审核账号信息
      proxyAccountInfo: {},
      dayjs,

      auditDetail: {},
      incomeAuditDetail1: [], // 德州
      incomeAuditDetail2: [], // 保险
      incomeAuditDetail3: [], // 其他
      incomeAuditDetail4: [], // 增值服务
      proxyIncomeList: [],

      amountDialogName: undefined,
      amountDialogVisible: false
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  mounted() { },
  methods: {
    amountDialog(name) {
      this.amountDialogName = name
      this.amountDialogVisible = true
    },
    getData() {
      this.loading = true
      this.$api
        .getProxyDetailQueryDetail({
          merchantId: this.detailData.merchantId,
          userName: this.detailData.proxyName
        })
        .then((res) => {
          if (res?.code === 200) {
            this.proxyAccountInfo = res.data || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
      this.$api
        .getProxyCommissionCashDetail({
          id: this.detailData.orderNo
        })
        .then((res) => {
          if (res?.data?.length == 0) {
            this.loading = false
            this.incomeAuditDetail1 = []
            this.incomeAuditDetail2 = []
            this.incomeAuditDetail3 = []
            this.incomeAuditDetail4 = []
            this.auditDetail = {}
          }
          if (res?.code === 200) {
            this.loading = false
            this.auditDetail = Object.assign(res.data, {
              proxyId: this.detailData.proxyId,
              id: this.detailData.id,
              cycleStartDate: this.detailData.cycleStartDate,
              cycleEndDate: this.detailData.cycleEndDate
            })
            const fundsAuditDetailRespList =
              res.data?.fundsAuditDetailRespList || []
            fundsAuditDetailRespList.forEach((row) => {
              this[`incomeAuditDetail${row.rebateType}`] = [row]
            })
          }
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.audit-content {
	.block {
		padding: 20px 20px 20px 20px;
		.name {
			font-weight: 600;
		}
		.block-content {
			position: relative;
			width: 100%;
			margin-top: 10px;
			word-break: break-all;
		}
	}
	.mb {
		.el-col {
			min-height: 40px;
			margin-bottom: 10px;
		}
	}
}
</style>
